<template>
    <div style="height:100% ">
        <el-row style="height:100%;background: #6f7676;">
            <el-col :lg="16" :md="12" class="col_left">
                <h1>PIGGY-管理系统</h1>
                <span>程序小猪</span>
            </el-col>
            <el-col :lg="8" :md="12" class="col_right">
                <h1>登录</h1>
                <el-form class="login-form" ref="ruleFormRefLogin" :model="ruleFormLogin" :rules="rulesLogin">
                    <el-form-item prop="username">
                        <el-input type="text" placeholder="请输入用户名" v-model="ruleFormLogin.username">
                            <template #prefix>
                                <el-icon>
                                    <UserFilled />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" placeholder="请输入密码" v-model="ruleFormLogin.password">
                            <template #prefix>
                                <el-icon>
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="loginHandle" :loading="loading">登录</el-button>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus'
    import { UserFilled,Lock }  from '@element-plus/icons-vue'
    import { useRouter } from 'vue-router'
    import { ref, reactive, onMounted, onBeforeMount } from 'vue'
    import { loginFn } from '@/api/login.js'
    import { useStore } from 'vuex'

    const loading = ref(false)
    const router = useRouter()
    const store = useStore()
    const ruleFormRefLogin = ref(null)
    const ruleFormLogin = reactive({
        username: 'admin',
        password: ''
    })
    console.log(ruleFormLogin.username)
    const rulesLogin = {
        username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 15, message: '长度应为5到15位之间', trigger: 'blur' },
        ],
        password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 15, message: '长度应为5到15位之间', trigger: 'blur' },
        ]
    }
    const loginHandle = () => {
    //校验整个form表单
        ruleFormRefLogin.value.validate(async isValid => {
            try {
                if (!isValid) {
                    return
                }
                loading.value = true
                const res = await loginFn(ruleFormLogin)
                console.log(res)
                if (!res.data || res.data.status !== 200) {
                    //登录失败提示          
                    return ElMessage.error(res.data.msg)
                }

                //登录成功提示
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                })
                //token本地存储
                window.sessionStorage.setItem("token", res.data.token)
                //跳转到后台首页 
                router.push('/home')
            } catch (err) {
                console.log(err)
            } finally {
                loading.value = false
            }
        })
    }
    // function onKeyUp(e) {
    //     console.log(e)
    //     if (e.key == 'Enter') loginHandle()
    // }
    // onMounted(() => {
    //     //添加键盘监听事件
    //     document.addEventListener('keyup', onKeyUp)
    // })
    // onBeforeMount(() => {
    //     //移除键盘监听
    //     document.removeEventListener('keyup',onKeyUp)
    // })
</script>

<style scoped>
.col_left {
    color: #220202;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* flex方向修改成垂直方向 */
    flex-direction: column;
}
.col_right {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
</style>